#{extends 'main.html' /} #{set title:'Carteiro' /} #{set 'moreScripts'}

<script type="text/javascript">
	// Photos
	var myPix = new Array(3)
	myPix[0] = "imagem1";
	myPix[1] = "imagem2";
	myPix[2] = "imagem3";

	// Text
	var myText = new Array(3)
	myText[0] = "";
	myText[1] = "";
	myText[2] = "";

	// Configuração
	var format = ".jpg";
	var timer = "4500";

	var i = 1;

	function animator(obj, pega) {
		if (obj != "fecha") {
			intervalo = window.setInterval("change()", timer);
		} else {
			window.clearInterval(intervalo);
			if (pega == "imagem1") {
				document.getElementById("image").src = 'public/images/'
						+ myPix[0] + format;
				document.getElementById('tarja').innerHTML = myText[0];
			} else if (pega == "imagem2") {
				document.getElementById("image").src = 'public/images/'
						+ myPix[1] + format;
				document.getElementById('tarja').innerHTML = myText[1];
			} else {
				document.getElementById("image").src = 'public/images/'
						+ myPix[2] + format;
				document.getElementById('tarja').innerHTML = myText[2];
			}
			intervalo = window.setInterval("change()", timer);
		}
	}

	function change() {
		if (i < myPix.length) {
			document.getElementById("image").src = 'public/images/'
					+ myPix[i % myPix.length] + format;

			if (i == 0) {
				document.getElementById('tarja').innerHTML = myText[i];
			} else if (i == 1) {
				document.getElementById('tarja').innerHTML = myText[i];
			} else {
				document.getElementById('tarja').innerHTML = myText[i];
				i = -1;
			}
			i++;
		} else {
			i = 0;
		}
	}

	window.onload = animator('go');
</script>
#{/set}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-BR">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link href="../../public/stylesheers/bootstrap-responsive.css "
	rel="stylesheet" type="text/css" />
<link href="../../public/stylesheers/bootstrap.css " rel="stylesheet"
	type="text/css" />
<link href="../../public/stylesheers/main.css " rel="stylesheet"
	type="text/css" />
<link href="../../public/stylesheers/tablesorter.css " rel="stylesheet"
	type="text/css" />
</head>
<body>
	<div class="container">

          <h2>Inicio</h2>

		<table cellpadding="0" cellspacing="0">
			<tr>
				<td background="public/images/background.png" nowrap="nowrap"><img
					id="image" src="public/images/imagem1.jpg" width='550' height='290'
					style="margin: 0 10px 0px 0px;"></td>
				<!--
1) Em id use os valores que colocou na Array
2) Em src coloque o endereço das imagens
-->
				<td background="public/images/background.png" style="width: 68px;"
					nowrap="nowrap"><a href="javascript:;"><img
						class="imgmenuone" src="public/images/imagem1.jpg" id="imagem1"
						onClick="animator('fecha',id);" width='58' height='58'></a> <br>
					<a href="javascript:;"><img class="imgmenu" id="imagem2"
						src="public/images/imagem2.jpg" onClick="animator('fecha',id);"
						width='58' height='58'></a> <br> <a href="javascript:;"><img
						class="imgmenu" id="imagem3" src="public/images/imagem3.jpg"
						onClick="animator('fecha',id);" width='58' height='58'></a></td>
			</tr>
		</table>
		<div class="transp"></div>
		<div id="tarja"></div>

		<div class="row-fluid" style="float: left;"></div>
		<!--/row-->

	</div>


</body>
</html>